<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/commons/jsp-head.jsp"%>

<div style="margin:5px">

 <table id="tg" class="easyui-treegrid" title="TreeGrid ContextMenu"   
            data-options="  
                iconCls: 'icon-ok',  
                rownumbers: true,  
                animate: true,  
                collapsible: true,  
                fitColumns: true,  
                url: '/system/menu-read.action',  
                idField: 'id',  
                treeField: 'name',  
                onContextMenu: onContextMenu  
            " fitColumns="true" >  
        <thead>  
            <tr>  
            	<th data-options="field:'name',width:180,editor:'text'">name</th>  
            	<th data-options="field:'id',width:180,editor:'text'">id</th>
            	<th data-options="field:'_parentId',width:180,editor:'text'">_parentId</th>
                <th data-options="field:'level',width:60,editor:'text'">level</th>  
                <th data-options="field:'url',width:80,editor:'text'">url</th> 
                <th data-options="field:'iframe',width:80,editor:'text'">iframe</th> 
                <th data-options="field:'remark',width:80,editor:'text'">remark</th>  
    
            </tr>  
        </thead>  
    </table>  
    </div>
    <div id="mm" class="easyui-menu" style="width:120px;">  
        <div onclick="menuAppend()" data-options="iconCls:'icon-add'">Append</div>
        <div onclick="menuInsert('before')" data-options="iconCls:'icon-add'">insert(before)</div> 
        <div onclick="menuInsert('after')" data-options="iconCls:'icon-add'">insert(after)</div>   
        <div onclick="menuEdit()" data-options="iconCls:'icon-remove'">Edit</div>  
        <div onclick="menuRemove()" data-options="iconCls:'icon-remove'">Remove</div>  
        <div class="menu-sep"></div>  
        <div onclick="collapse()">Collapse</div>  
        <div onclick="expand()">Expand</div>  
    </div>  
    
    
<div id="menu-treegrid-dlg" class="easyui-dialog"
	style="width: 400px; height: 280px; padding: 10px 20px" closed="true"
	buttons="#menu-treegrid-dlg-buttons">
	<div class="ftitle">auth_menu</div>
	<form id="menu-treegrid-fm" method="post" novalidate>
			<div class="fitem">
				<label>id:</label> <input name="id">
				
			</div>
		
			<div class="fitem">
				<label>_parentId:</label> <input name="_parentId">
				
			</div>
		
			<div class="fitem">
				<label>name:</label> <input name="name">
				
			</div>
		
			<div class="fitem">
				<label>level:</label> <input name="level">
				
			</div>
		
			<div class="fitem">
				<label>url:</label> <input name="url">
				
			</div>
			
			<div class="fitem">
				<label>iframe:</label> <input name="iframe">
				
			</div>
		
			<div class="fitem">
				<label>remark:</label> <input name="remark">
				
			</div>
		
		<!-- class="easyui-validatebox" validType="email" -->
		<!-- class="easyui-validatebox" required="true" -->
	</form>
</div>
<div id="menu-treegrid-dlg-buttons">
	<a href="javascript:void(0)" class="easyui-linkbutton"
		iconCls="icon-ok" onclick="menuSave()">Save</a> <a
		href="javascript:void(0)" class="easyui-linkbutton"
		iconCls="icon-cancel" onclick="javascript:$('#menu-treegrid-dlg').dialog('close')">Cancel</a>
</div>
    
       <script type="text/javascript">  
 		var menu_insert_type="before";

        function onContextMenu(e,row){  
            e.preventDefault();  
            $(this).treegrid('select', row.id);  
            $('#mm').menu('show',{  
                left: e.pageX,  
                top: e.pageY  
            });  
        }  
  
        //添加子节点
        function menuAppend(){   
        	
            var node = $('#tg').treegrid('getSelected');  
            
            var children=$('#tg').treegrid('getChildren',node.id);
            
            var idIndex=max(children);
            
            if(idIndex==0)
            {
            	idIndex=node.id*100;
            }
            
            idIndex++;
            
            $("#menu-treegrid-fm").clearForm();
      	  
      	  	$('#menu-treegrid-dlg input[name=id]').attr("value",idIndex);
         	  
      	  	$('#menu-treegrid-dlg input[name=_parentId]').attr("value",node.id);
            
      	  	$('#menu-treegrid-dlg').dialog('open').dialog('setTitle', '新建');
        }  
        
        //插入兄弟节点
        function menuInsert(type)
        {
        	 menu_insert_type=type;
        	
        	 var node = $('#tg').treegrid('getSelected');  
        	 var nodeId=node.id;
        	 var parent=$('#tg').treegrid('getParent',nodeId);
        	 
        	 
        	 if(parent==null)
        	 {
        		return; 
        	 }
        	 
             var children=$('#tg').treegrid('getChildren',parent.id);
             
                 
             if (node && type=="before"){
            	 
            	 $("#menu-treegrid-fm").clearForm();
            	 
            	 $('#menu-treegrid-dlg input[name=id]').attr("value",nodeId);
           	  
           	  	 $('#menu-treegrid-dlg input[name=_parentId]').attr("value",parent.id);
           	  
            	 $('#menu-treegrid-dlg').dialog('open').dialog('setTitle', '新建');
              }
              if (node && type=="after"){
            	  
            	  $("#menu-treegrid-fm").clearForm();
            	  
            	  $('#menu-treegrid-dlg input[name=id]').attr("value",nodeId+1);
               	  
            	  $('#menu-treegrid-dlg input[name=_parentId]').attr("value",parent.id);
            	  
            	  $('#menu-treegrid-dlg').dialog('open').dialog('setTitle', '新建');
           	  }
        }
        
        
        //删除菜单
        function menuRemove(nodeId){ 	
            var node = $('#tg').treegrid('getSelected');  
            
            var id=node.id;

            $.messager.confirm('确认', '是否确认删除此节点（子节点也会一并删除）?', function(r){  
                if (r){  
                	if (node){  
                    	
                		var deleteRes=false;
                		
                		var deleteMsg="";
                		
                		//删除子结点
                    	$.ajax({  
                            async:false,  //异步或是同步，默认为异步  
                            url:"/curd/delete.action?target=auth_menu",  
                            data:{"_parentId":id},  
                            type:"post",  
                            dataType:"json",  
                            success:function(data){  
                            	deleteRes=data.success;
                            	deleteMsg=data.errorMsg;
                            }  
                        });  
                    	
                		if(!deleteRes)
                			{
                			  $.messager.alert('失败','删除子节点失败！\n'+deleteMsg,'error'); 
                			  return ;
                			}
                    	
                    	//删除节点
                    	$.ajax({  
                            async:false,  //异步或是同步，默认为异步  
                            url:"/curd/delete.action?target=auth_menu",  
                            data:{"id":id},  
                            type:"post",  
                            dataType:"json",  
                            success:function(data){  
                              $('#tg').treegrid('reload');	
                              if(data.success==true)
                            	  {
                            	  $.messager.alert('成功','删除成功!','info');  
                            	  }
                              else
                            	  {
                            	  $.messager.alert('失败',data.errorMsg,'error');  
                            	  }
                            }  
                        });
                       // $('#tg').treegrid('remove', node.id);  
                    }  
                }  
            });
            
            
            
        }  
        
        //父菜单重叠
        function collapse(){  
            var node = $('#tg').treegrid('getSelected');  
            if (node){  
                $('#tg').treegrid('collapse', node.id);  
            }  
        }  
        //父菜单展开
        function expand(){  
            var node = $('#tg').treegrid('getSelected');  
            if (node){  
                $('#tg').treegrid('expand', node.id);  
            }  
        }  
        
        function max(array)
        {
        	var max=0;
        	for (var i=0;i<=array.length-1;i++) 
        	{ 
        	     if(max<array[i].id)max=array[i].id
        	} 
        	return max;
        }
        
        function menuEdit(){  
            
            var row = $('#tg').treegrid('getSelected');  
            $('#menu-treegrid-fm').form('clear');
            $('#menu-treegrid-fm').form('load',row);          
            $('#menu-treegrid-dlg').dialog('open').dialog('setTitle', '编辑');
        }  
        
        
        function menuSave()
        {
        	menuFormSubmit();   	
        }
        
        function menuFormSubmit(){  
        	
        	var node = $('#tg').treegrid('getSelected');
 
        	var children = $('#tg').treegrid('getChildren',parent.id)
        	
        	var id = $('#menu-treegrid-dlg input[name=id]').val();
        	
        	var _parentId=$('#menu-treegrid-dlg input[name=_parentId]').val();
	 
        	
        	var result=false;
        	
        	$.ajax({  
                async:false,  //异步或是同步，默认为异步  
                url:"/system/menu-id-up-1.action",  
                data:{"id":id,"_parentId":_parentId},  
                type:"post",  
                dataType:"json",  
                success:function(data){  
                  if(data.success==true)
                  {
                	  result=data.success;
                  }

                }  
            });
        	
        	if(!result)
        	{
        			alert("更新失败");
        			return;
        	}
        	
        	var option={
        			url:'/curd/create.action?target=auth_menu',
        			type:"post",
        			dataType:"json",
        			success:function(data){
        				if(data.success == true)
        					{
        					$('#tg').treegrid('reload');	
        					$('#menu-treegrid-dlg').dialog('close');
        					}
        			}
        	}
        	$("#menu-treegrid-fm").ajaxSubmit(option);
        }  
        
    </script>
    <style type="text/css">
#menu-treegrid-fm {
	margin: 0;
	padding: 10px 30px;
}

.ftitle {
	font-size: 14px;
	font-weight: bold;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.fitem {
	margin-bottom: 5px;
}

.fitem label {
	display: inline-block;
	width: 80px;
}

</style>
    